<{include file="public/header.html"}>
<script type="text/javascript">
    var from_u = <{$from_user}>;
    var to_u = <{$to_user}>;
</script>
<div id="dialogue-window" class="dialogue overhide">
	<div class="title-big">
		私信对话窗口
	</div>
	<div class="dialogue-box">
		<div class="dialogue-head">
			<div class="p20">
                            <a href="<{$dialog_user['space_url']}>" class="header fl overhide">
					<img src="<{$dialog_user['head_img']}>"/>
				</a>
				<div class="fl ml20">
                                    <a href="<{$dialog_user['space_url']}>" class="name"><{$dialog_user['nickname']}></a>
					<p class="signature"><{$dialog_user['signature']}></p>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="dialogue-con plr20 pt20 pb70">
                    <{if $message_counts==10}>
                    <a href="javascript:void(0);" class="dialogue-all blue" id="dialogue-more" data-action-url="<{$load_more_url}>">点击查看更多</a>
                    <{/if}>
                    <ul id="message-dialog-box" class="mb30 dialogue-content-box">
                        <{foreach from=$message_list item=val}>
                        <{if $val['time_mark']}>
                            <p class="dialogue-time tc">- <{$val['time_mark']}>  -</p>
                        <{/if}>    
                        <{if $val['is_self']}>
                        <li class="dialogue-right" data-timestamp="<{$val['create_time']}>">
                                <div class="header fr ml10"><img src="<{$bbs_user_info['head_img']}>"/></div>
                                <div class="dialogue-txt fr"><{$val['content']}></div>
                        </li>
                        <{else}>
                        <li class="dialogue-left" data-timestamp="<{$val['create_time']}>">
                                <div class="header fl mr10">
                                        <img src="<{$dialog_user['head_img']}>"/>
                                </div>
                                <div class="dialogue-txt fl"><{$val['content']}></div>
                        </li>
                        <{/if}>
                        <{/foreach}>
                    </ul>
                    <div class="input-box">
                        <div class="input-box">
                                <input type="text" id="dialog-messge" class="fl" value="" placeholder="输入内容"/>
                                <input type="hidden" id="dialog_action" value="users_send_msg"/>
                                <button id="send-message-btn" class="fr" data-disvilad-val="发送中...">发送(Enter)</button>
                                <div class="clear"></div>
                        </div>
                    </div>
		</div>
	</div>
	
</div>
<script type="text/javascript">
    
    
    if(window.WebSocket){
        function check_time(t){
            var _time = $("#message-dialog-box li:last").attr("data-timestamp");
            if(_time == "undefined"){
                return false;
            }
            if((t - parseInt(_time))/60 > 3 ){
                return true;
            }
            return false;
        }
        
        var Chat = {};
        Chat.contentId = document.getElementById('dialog-messge');
        Chat.sendBtnId = document.getElementById('send-message-btn');
        Chat.msgmoreId = document.getElementById('dialogue-more');
        Chat.socket = null;
        Chat.isSend = true;
        Chat.connect = (function(host){
            Chat.socket = new WebSocket(host);
            Chat.socket.onopen = function () {//链接服务器
                Chat.socket.send(JSON.stringify({"from":from_u.uuid,"to":to_u.uuid,"cmd":"online"}));
                //监听回车发送事件
                Chat.contentId.onkeydown = function(event) {
                    if (event.keyCode == 13) {
                        Chat.sendMessage();
                    }
                };
                //发送按钮点击事件
                Chat.sendBtnId.onclick = function(event){
                    Chat.sendMessage();
                }
                return $(".dialogue-con .dialogue-content-box").scrollTop($("#message-dialog-box")[0].scrollHeight);
            };
            Chat.socket.onclose = function () {//关闭链接
                Chat.contentId.onkeydown = null;
            };
            Chat.socket.onmessage = function (event) {//接受服务器数据
                
                var data = $.parseJSON(event.data);
                if(data.cmd == "timeout"){
                    $("#message-dialog-box li:last").append($("<span>!</span>"));
                    return layer.msg("链接超时，请刷新页面",{icon:0,time:30000,offset:300})
                }else if(data.cmd == "success"){
                    Chat.isSend = true;
                    Chat.sendBtnId.innerHTML = "发送(Enter)";
                }else{
                    var html="";
                    if(check_time(data.time)){
                        var date = new Date(data.time*1000);
                        Y = date.getFullYear() + '-';
                        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                        D = date.getDate() + ' ';
                        h = date.getHours() + ':';
                        m = date.getMinutes() + ':';
                        s = date.getSeconds() < 10 ? "0"+date.getSeconds() : date.getSeconds(); 

                        html += "<p class='dialogue-time tc'>- "+Y+M+D+h+m+s+" -</p>";
                    }

                    if(data.is_self == 1){
                        html += "<li class='dialogue-right' data-timestamp='"+data.time+"'>";
                        html += "<div class='header fr ml10'><img src='"+from_u.headImg+"'/></div>";
                        html += "<div class='dialogue-txt fr'>"+data.message+"</div>";
                        html += "</li>";
                    }else{
                        html += "<li class='dialogue-left' data-timestamp='"+data.time+"'>";
                        html += "<div class='header fl mr10'><img src='"+to_u.headImg+"'/></div>";
                        html += "<div class='dialogue-txt fl'>"+data.message+"</div>";
                        html += "</li>";
                    }


                    $("#message-dialog-box").append(html);
                    return $(".dialogue-con .dialogue-content-box").scrollTop($("#message-dialog-box")[0].scrollHeight);
                }
            };
            
            Chat.socket.onerror = function(evt){
                var oBox = document.getElementsByTagName('head').item(0); 
                var oScript= document.createElement("script"); 
                oScript.type = "text/javascript"; 
                oScript.src="<{$style_dir}>/js/dialog.widget.js"; 
                oBox.appendChild( oScript);
            } 
        });
        Chat.initialize = function() {//初始化
            if (window.location.protocol == 'http:') {
                Chat.connect('ws://120.27.142.148:9508');
            } else {
                Chat.connect('wss://120.27.142.148:9508');
            }
            Chat.contentId.focus();
        };
        Chat.sendMessage = (function() {//发送消息
            var message = Chat.contentId.value;
            if (message != '') {
                if(!Chat.isSend){
                    layer.msg("操作过于频繁哦",{icon:0,time:2000,offset:300});return;
                }
                Chat.isSend = false;
                Chat.contentId.value = '';
                Chat.contentId.focus();
                var this_time = parseInt((new Date().getTime())/1000);
                var html = "";
                var flag = check_time(this_time);
                if(flag){
                    var date = new Date(this_time*1000);
                    Y = date.getFullYear() + '-';
                    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                    D = date.getDate() + ' ';
                    h = date.getHours() + ':';
                    m = date.getMinutes() + ':';
                    s = date.getSeconds() < 10 ? "0"+date.getSeconds() : date.getSeconds(); 
                    
                    html += "<p class='dialogue-time tc'>- "+Y+M+D+h+m+s+" -</p>";
                }
                
                html += "<li class='dialogue-right' data-timestamp='"+this_time+"'>";
                html += "<div class='header fr ml10'><img src='"+from_u.headImg+"'/></div>";
                html += "<div class='dialogue-txt fr'>"+message+"</div>";
                html += "</li>";
                Chat.sendBtnId.innerHTML = "发送中...";
                Chat.socket.send(JSON.stringify({"from":from_u.uuid,"to":to_u.uuid,"message":message,"cmd":"chats","time":flag==true?this_time:0}));
                $("#message-dialog-box").append(html);
                return $(".dialogue-con .dialogue-content-box").scrollTop($("#message-dialog-box")[0].scrollHeight);
            }else{
                layer.msg("内容不能为空哦",{icon:0,time:1000,offset:0});return;
            }
        });
        Chat.initialize();
        if(Chat.msgmoreId != null){
            Chat.msgmoreId.onclick = function(){
                return _self=$(this),_url=_self.attr("data-action-url"),$.ajax({
                    url:_url,type:"GET",async:true,dataType:"json",timeout:10000,success:function(data){
                        if(data.reqStatus){
                            if(data.data.flag==0){
                                _self.css("display","none");
                            }
                            _self.attr("data-action-url",data.data.url);
                            $("#message-dialog-box").prepend(data.data.str);
                        }else{
                            layer.msg("内容不能为空哦",{icon:0,time:1000,offset:0});return false;
                        }

                    }
                });
            }
        }
        
    }else{
        var oBox = document.getElementsByTagName('head').item(0); 
        var oScript= document.createElement("script"); 
        oScript.type = "text/javascript"; 
        oScript.src="<{$style_dir}>/js/dialog.widget.js"; 
        oBox.appendChild( oScript); 
    }
</script>
<!--底部-->
<{include file="public/footer.html"}>